<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- designer-manual.qdoc -->
  <title>快速开始 Qt Designer | Qt Designer 手册</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="../qtdoc/index.html">Qt 5.14</a></td><td ><a href="qtdesigner-manual.html">Qt Designer 手册</a></td><td >快速开始 Qt Designer</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtdesigner-manual.html">Qt 5.14.2 参考文档</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">快速开始 Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-quick-start.html-description -->
<div class="descr"> <a name="details"></a>
<p>使用 <i>Qt Designer</i> 包含 <b>四个</b> 基本步骤:</p>
<ol class="1" type="1"><li>选择您的窗体（form）和对象</li>
<li>将对象放置在窗体（form）上</li>
<li>将信号（signals）连接到槽（slots）上</li>
<li>预览窗体（form）</li>
</ol>
<p class="centerAlign"><img src="images/rgbController-screenshot.png" alt="" /></p><p>假设您想设计一个小部件（widget）(见上面的截图)，其中包含操作Red、Green和Blue(RGB)值所需的控件——在图像处理程序中随处可见的小部件（widget）类型 。</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/designer-choosing-form.png" alt="" /></td><td ><b>选择一个窗体（Form）</b><p>首先从<b>New Form</b>对话框中选择<b>Widget</b>。</p>
</td></tr>
</table></div>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/rgbController-arrangement.png" alt="" /></td><td ><b>在窗体（Form）上放置小部件（Widgets）</b><p>将三个标签（labels）、三个旋转框（spin boxes）和三个垂直滑块（vertical sliders）拖放到窗体上。要更改标签的默认文本，只需双击它。你可以按照你想要的方式来排列它们。</p>
</td></tr>
</table></div>
<p>为了确保它们在程序中的布局与此完全相同，您需要将这些小部件（widgets）放入一个布局（layout）中。我们三个一组来做。 选择 &quot;RED&quot; 标签（label）。然后， 按住 <b>Ctrl</b> 选择相应的旋转框（spin box）和滑块（slider）。在 <b>窗体(O)</b> 菜单, 选择 <b>栅格布局（Lay Out in a Grid）</b>。</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/rgbController-form-gridLayout.png" alt="" /></td><td ><img src="images/rgbController-selectForLayout.png" alt="" /></td></tr>
</table></div>
<p>对于其他两个标签（label）以及它们对应的旋转框(spin box)和滑块(slider)也重复此步骤。</p>
<p>下一步是将这三个布局(layout)合并到一个主布局(main layout)中。主布局是顶级小部件(在本例中是 <a href="../qtwidgets/qwidget.html">QWidget</a>) 的布局（layout）。重要的是，你的顶级小部件（widget）有一个布局（layout）; 否则，在调整窗口大小时，窗口中的小部件将不会调整大小。要设置布局, <b>右键</b> 单击窗体（Form）上三个独立布局（layouts）之外的任何地方，然后选择<b>水平布局（Lay Out Horizontally）</b>。或者，您也可以选择在<b>栅格布局（Lay Out in a Grid）</b> -- 您仍然会看到相同的排列(如下所示)。</p>
<p class="centerAlign"><img src="images/rgbController-final-layout.png" alt="" /></p><p><b>注意: </b>窗体（form）上看不到主布局（Main layouts）。若要检查是否安装了主布局，请尝试调整窗体的大小;您的小部件应该相应地调整大小。或者，您可以查看 <i>Qt Designer</i> 的 <b>对象查看器（Object Inspector）</b>。如果您的顶级小部件（widget）设置了布局（layout），您将看到彩色的 打破布局 图标, <img src="images/rgbController-no-toplevel-layout.png" alt="" /> .</p><p>当您单击滑块（slider）并将其拖动到某个值时，您希望旋转框（spin box）显示滑块（slider）的位置。要完成此行为，需要将滑块（slider）的<a href="../qtwidgets/qabstractslider.html#valueChanged">valueChanged()</a>信号函数连接到旋转框（spin box）的<a
  href="../qtwidgets/qspinbox.html#value-prop">setValue()</a>槽函数。您还需要进行反向连接,例如，将旋转框（spin box）的<a href="../qtwidgets/qspinbox.html#valueChanged">valueChanged()</a>信号函数连接到滑块（slider）的<a href="../qtwidgets/qabstractslider.html#value-prop">setValue()</a>槽函数 。</p>
<p>要做到这一点, 你必须切换到 <b>编辑信号/槽（Edit Signals/Slots）</b> 模式 , 要么按 <b>F4</b> ，要么从Edit菜单选择 <b>编辑信号/槽（Edit Signals/Slots）</b>。</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/rgbController-signalsAndSlots.png" alt="" /></td><td ><b>连接信号和槽</b><p>单击滑块（slider）并将光标拖向旋转框（spin box），将弹出<b>配置连接（Configure Connection）</b>对话框，如下所示。选择正确的信号和槽，然后单击<b>OK</b>。</p>
</td></tr>
</table></div>
<p class="centerAlign"><img src="images/rgbController-configure-connection1.png" alt="" /></p><p>相反的顺序重复以上步骤, 单击旋转框（spin box）并将光标拖向滑块（slider），以将旋转框（spin box）的<a href="../qtwidgets/qspinbox.html#valueChanged">valueChanged()</a>信号连接到滑块（slider）的<a href="../qtwidgets/qabstractslider.html#value-prop">setValue()</a>槽。</p>
<p>你可以使用下面的截图作为选择正确信号和槽的指导。</p>
<p class="centerAlign"><img src="images/rgbController-configure-connection2.png" alt="" /></p><p>既然已经成功连接了RGB控制器的&quot;RED&quot组件的对象，那么同样也可以连接&quot;GREEN&quot和&quot;BLUE&quot组件。</p>
<p>由于RGB值的范围在0到255之间，我们需要限制旋转框和滑块的特定范围。</p>
<div class="table"><table class="generic">
 <tr valign="top" class="odd"><td ><img src="images/rgbController-property-editing.png" alt="" /></td><td ><b>设置小部件（Widget） 属性</b><p>点击第一个旋转框（spin box）。在 <b>属性编辑器（Property Editor）</b> 中, 您将看到 <a href="../qtwidgets/qspinbox.html">QSpinBox</a> 的属性。在 <a href="../qtwidgets/qspinbox.html#maximum-prop">maximum</a> 属性栏输入&quot;255&quot;，然后，单击第一个垂直滑块（vertical slider）, 您将看到 <a href="../qtwidgets/qabstractslider.html">QAbstractSlider</a> 的属性 。在 <a href="../qtwidgets/qabstractslider.html#maximum-prop">maximum</a> 的属性栏输入&quot;255&quot;， 对其余的旋转框（spin boxes）和滑块（sliders）重复此过程 。</p>
</td></tr>
</table></div>
<p>现在，我们预览一下你的窗体（form），看看它在你的应用程序中会是什么样子 - 按 <b>Ctrl + R</b> 或者从菜单<b>窗体（Form）</b> 选择 <b>预览（Preview）</b>。尝试拖动滑块-旋转框也会镜像它的值(反之亦然)。此外，还可以调整它的大小，以查看用于管理子小部件（widgets）的布局（layouts）如何响应不同的窗口大小。</p>
</div>
<!-- @@@designer-quick-start.html -->
<p class="naviNextPrevious footerNavi">
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
    <acronym title="Copyright">&copy;</acronym> 2020 The Qt Company Ltd. 文档贡献包括在这里是各自所有者的版权。<br /> 在此提供的文档是根据由自由软件基金会发布的<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a>的条款授权的。<br /> Qt及其商标为Qt有限公司的商标。在芬兰和/或世界其他国家。所有其他商标均为其各自所有者的财产。</p>
</div>
</body>
</html>
